<template>
    <!-- 更新应急演练记录 -->
    <base-breadcrumb>
        <a-card :bordered="false">
            <div class="page-header table-page-search-wrapper">
                <title-name :title="params.pageType === 'look' ? '信息详情' : '基本信息'" />
                <a-form-model
                    ref="ruleForm"
                    :model="formInfo"
                    :rules="rules"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
                >
                    <a-row :gutter="24">
                        <a-col :md="16" :sm="16">
                            <a-form-model-item label="所属单位">
                                <span v-if="params.pageType === 'look'">{{ formInfo.viewName}}</span>
                                <BaseInput v-else disabled v-model="formInfo.viewName" />
                            </a-form-model-item>
                        </a-col>
<!--                        <a-col :md="8" :sm="8">-->
<!--                            <a-form-model-item label="所属分公司">-->
<!--                                <span v-if="params.pageType === 'look'">{{ formInfo.branchComName }}</span>-->
<!--                                <BaseInput v-else disabled v-model="formInfo.branchComName" />-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
<!--                        <a-col :md="8" :sm="8">-->
<!--                            <a-form-model-item label="所属项目" prop="projectId">-->
<!--                                <span v-if="params.pageType === 'look'">{{ formInfo.projectName }}</span>-->
<!--                                <BaseInput v-else disabled v-model="formInfo.projectName" />-->
<!--                            </a-form-model-item>-->
<!--                        </a-col>-->
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="所属计划">
                                <span v-if="params.pageType === 'look'">{{ formInfo.planName }}</span>
                                <BaseInput v-else disabled v-model="formInfo.planName" />
                            </a-form-model-item>
                        </a-col>

                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="所属记录">
                                <span v-if="params.pageType === 'look'">{{ formInfo.name }}</span>
                                <BaseInput v-else disabled v-model="formInfo.name" />
                            </a-form-model-item>
                        </a-col>

                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="演练方式">
                                <span v-if="params.pageType === 'look'">{{
                                    formInfo.planDetailsVO.drillMethod.name
                                }}</span>
                                <BaseInput v-else disabled v-model="formInfo.planDetailsVO.drillMethod.name" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="计划演练时间">
                                <span v-if="params.pageType === 'look'">{{ formInfo.drillTime }}</span>
                                <BaseInput v-else disabled v-model="formInfo.drillTime" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="演练内容">
                                <span v-if="params.pageType === 'look'">{{ formInfo.planDetailsVO.drillContent }}</span>
                                <BaseInput v-else disabled v-model="formInfo.planDetailsVO.drillContent" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="演练地点" prop="drillSite">
                                <span v-if="params.pageType === 'look'">{{ formInfo.drillSite }}</span>
                                <BaseInput v-else placeholder="请输入" v-model="formInfo.drillSite" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="演练时间" prop="drillDate">
                                <span v-if="params.pageType === 'look'">{{ formInfo.drillDate }}</span>
                                <a-date-picker
                                    placeholder="请选择"
                                    v-else
                                    v-model="formInfo.drillDate"
                                    @change="(date, dateString) => getTime(date, dateString, 'formInfo', 'drillDate')"
                                />
                            </a-form-model-item>
                        </a-col>

                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="组织人" prop="organizerId">
                                <span v-if="params.pageType === 'look'">{{ formInfo.organizerName }}</span>
                                <a-select v-else show-search placeholder="请选择" v-model="formInfo.organizerId">
                                    <a-select-option
                                        v-for="item in organizePeopleList"
                                        :key="item.employeeId"
                                        :value="item.employeeId"
                                        >{{ item.employeeName }}</a-select-option
                                    >
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24" :sm="24">
                            <a-form-model-item label="过程记录" prop="processing">
                                <a-textarea
                                    :disabled="params.pageType === 'look'"
                                    placeholder="请输入"
                                    :auto-size="{ minRows: 20, maxRows: 25 }"
                                    v-model="formInfo.processing"
                                />
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="24" :sm="24">
                            <a-form-model-item label="演练结果评价" prop="evalResult">
                                <a-textarea
                                    :disabled="params.pageType === 'look'"
                                    placeholder="请输入"
                                    v-model="formInfo.evalResult"
                                />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item
                                label="现场照片"
                                :label-col="{ lg: 2, md: 3, sm: 3 }"
                                :wrapper-col="{ lg: 22, md: 21, sm: 21 }"
                            >
                                <span
                                    v-if="
                                        params.pageType === 'look' &&
                                        (!formInfo.fileInfoList || formInfo.fileInfoList.length < 1)
                                    "
                                >
                                    <empty description="暂未上传现场图"></empty>
                                </span>
                                <div v-else>
                                    <upload-list
                                        uploadType="image"
                                        :businessCode="'SHE03'"
                                        :disabled="params.pageType === 'look'"
                                        :editModel="editModel"
                                        :uploadArrys.sync="formInfo.fileInfoList"
                                        multiple
                                        :isMultiple="true"
                                    ></upload-list>
                                </div>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </div>
        </a-card>
        <div class="tool-btns page-btn-right-top" v-if="params.pageType !== 'look'">
            <!-- <a-button
                v-if="params.id != '' && formInfo.auditStatus == 'DRAFT'"
                type="danger"
                @click="deleteDraft('DELETE')"
                >删除记录</a-button
            > -->
            <a-button :loading="loading.DRAFT" class="ml20" type="primary" @click="submitForm('DRAFT')"
                >保存草稿</a-button
            >
            <a-button :loading="loading.SUBMITTED" class="ml20" type="primary" @click="submitForm('SUBMITTED')"
                >提交</a-button
            >
            <a-button class="ml20" type="primary" @click="closeForm">关闭</a-button>
        </div>

        <div v-else class="tool-btns page-btn-right-top">
            <BasePrintButton type="primary" :beforePrintFn="getRecordDetailPrintReq" />
            <a-button class="ml20" type="primary" @click="closeForm">关闭</a-button>
        </div>
    </base-breadcrumb>
</template>

<script>
import {
    getRecordDetail,
    getRecordDetailPrint,
    getOrganizePeopleList,
    editRecordDetail,
    deleteRecordDetail,
    addRecordDetail,
} from '@/api/safetySupervision/emergencyDrill'

import { STable } from '@/components'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import { Empty } from 'ant-design-vue' // 无数据提示
import UploadList from '@/components/UploadList'
import BasePrintButton from '@/components/BasePrintButton' // 打印按钮
export default {
    name:'a'+Date.now(),    components: {
        SelectSubCompany,
        SelectProject,
        STable,
        Empty,
        UploadList,
        BasePrintButton,
    },
    data() {
        return {
            id: '',
            formInfo: {
                fileInfoList: [],
                planDetailsVO: {
                    drillMethod: {},
                },
              viewName: '',
              projectName: "",
              branchComName: ""
            },
            loading: {
                DELETE: false,
                DRAFT: false,
                SUBMITTED: false,
            },
            // planList: [],
            // recordList: [],
            organizePeopleList: [],
            editModel: 0,
            rules: {
                drillDate: [{ required: true, message: '请选择时间' }],
                organizerId: [{ required: true, message: '请选择组织人' }],
                processing: [{ required: true, message: '请输入过程记录' }],
                evalResult: [{ required: true, message: '请输入演练结果评价' }],
                drillSite: [{ required: true, message: '请输入演练地点' }],
            },
            params: {
                pageType: 'look',
            },
        }
    },
    created() {},
    mounted() {
        console.log(this.$route.query)
        this.params = this.$route.query

        console.log(this.params)
        this.$route.meta.title = '应急演练记录填报'
        if (this.params.pageType == 'edit') {
            this.editModel = 2
        } else {
            this.editModel = 0
        }
        // this.getOrganizePeopleList()
        this.getRecordDetail()
    },
    methods: {
        getRecordDetailPrintReq() {
            const { id } = this.$route.query
            if (!id) return
            const params = {
                id,
            }
            return getRecordDetailPrint(params).then((res) => {
                console.log(res)
                return res[1].data.content
            })
        },
        getTime(date, dateString, type, name) {
            this[type][name] = dateString
            console.log(this[type][name])
        },
        closeForm() {
            this.$multiTab.close(this.$route.fullpath)
        },
        async deleteRecordDetail(params) {
            const [err, res] = await deleteRecordDetail(params)
            if (!err) {
                this.$message.success('删除成功')
                this.closeForm()
            }
        },
        async deleteDraft() {
            let obj = {
                id: this.params.id,
            }
            let that = this
            this.$confirm({
                title: '温馨提示',
                content: '确定是否删除数据？',
                okText: '确认',
                okType: 'danger',
                cancelText: '取消',
                onOk: () => {
                    return that.deleteRecordDetail(obj)
                },
            })
        },
        // async deleteDraft() {
        //     let obj = {
        //         id: this.params.id,
        //     }
        //     this.loading.DELETE = true
        //     const [err, res] = await deleteRecordDetail(obj)
        //     if (!err) {
        //         this.$message.success('删除成功')
        //         this.closeForm()
        //     }
        //     this.loading.DELETE = false
        // },
        // changeRecord(e) {
        //     console.log(e)
        //     let record = this.recordList.filter((item) => e === item.id)[0]
        //     console.log(record)

        //     // this.formInfo.
        // },
        async getRecordDetail() {
            const { id } = this.$route.query
            if (!id) return
            const params = {
                id,
            }
            const [err, res] = await getRecordDetail(params)

            if (!err) {
                this.formInfo = {
                    ...this.formInfo,
                    ...res.data,
                }
              this.formInfo.viewName =  this.formInfo.branchComName + '/' + this.formInfo.projectName
                if (this.formInfo.auditStatus == 'SUBMITTED') {
                    this.params.pageType = 'look'
                }
            }
            this.getOrganizePeopleList()
        },
        // async getPlanList() {
        //     let params = {
        //         branchComId: this.formInfo.branchComId,
        //         projectId: this.formInfo.projectId,
        //     }

        //     const [err, res] = await getEmergencyPlanList(params)
        //     if (!err) {
        //         this.planList = res.data || []
        //     }
        // },
        async getOrganizePeopleList() {
            let params = {
                id: this.formInfo.projectId,
                // id:'614351216104837120'
            }

            getOrganizePeopleList(params).then((res) => {
                let obj = {}
                res.data = res.data.reduce((cur, next) => {
                    obj[next.employeeId] ? '' : (obj[next.employeeId] = true && cur.push(next))
                    return cur
                }, []) //设置cur默认类型为数组，并且初始值为空的数组
                console.log(res.data)
                this.organizePeopleList = res.data || []
            })
        },
        // async getPlanDetail(id) {
        //     const params = {
        //         id: this.formInfo.planId,
        //     }
        //     const [err, res] = await getPlan(params)
        //     if (!err) {
        //         console.log(res)
        //         this.recordList = res.data.itemVO
        //     }
        // },
        submitForm(status) {
          // return console.log(this.formInfo)
            let that = this
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    that.editRecord(status)
                }else {
                  this.$message.warning("请填写完所有必填项信息")
                }
            })
        },
        async editRecord(status) {
            this.loading[status] = true
            this.formInfo.auditStatus = status
            // this.formInfo.id = this.$route.query.id
            // if (typeof this.formInfo.drillDate != 'string') {
            //     this.formInfo.drillDate.format('YYYY-MM-DD HH:mm:ss')
            // }

            if (this.formInfo.id == null) {
                const [err, res] = await addRecordDetail(this.formInfo)

                if (!err) {
                    this.$message.success('填报成功')
                    this.closeForm()
                }
            } else {
                const [err, res] = await editRecordDetail(this.formInfo)

                if (!err) {
                    this.$message.success('修改成功')
                    this.closeForm()
                }
            }

            this.loading[status] = false
        },
    },
}
</script>

<style lang="less" scoped>
.foot-btn {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
</style>
